import React from 'react';

export default class TableList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFirstLoading: true
    }
  }

  /**
   * 当组建再次接收到props时触发
   */
  componentWillReceiveProps() {
    // 列表只有在第一次挂载的时候，isFirstLoading为true
    this.setState({ isFirstLoading: false });
  }
  render() {

    //表头信息
    let tableHeader = this.props.tableHeads
      .map((tableheader, index) => {
        if(typeof tableheader === 'object')
          return <th key={index} width={tableheader.width}>{tableheader.name}</th>
        else if(typeof tableheader === 'string') 
          return <th key={index}>{tableheader}</th>
      });

    //列表内容
    let listBody = this.props.children;

    //列表信息
    let listInfo = (
      <tr>
        <td colSpan={this.props.tableHeads.length} className="text-center">{this.state.isFirstLoading ? '正在加载...' : '没有找到相应的结果'}</td>
      </tr>
    );

    let tableBody = listBody.length > 0 ? listBody : listInfo;
    return (
      <div className="row">
        <div className="col-md-12">
          <table className="table table-striped table-bordered">
            <thead>
              <tr>
                {tableHeader}
              </tr>
            </thead>
            <tbody>
              {tableBody}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}